<template>
  <h4 class="text-size-20">项目经验</h4>
  <div class="text-left-indent-20">
    <a href="https://gitee.com/dyed-bear/open-code" target="_blank"
      >Gitee仓库地址</a
    >
  </div>

  <div v-for="item in list" :key="item.title">
    <a-card
      :bordered="true"
      style="border: 1px solid rgba(0, 0, 0, 0.1)"
      class="margin-12"
      v-if="item"
    >
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel style="text-align: left" key="1">
          <template #header>
            {{ item.title }}
          </template>
          <template #extra>
            <span v-if="item.onlineUrl" class="text-blue-12">(已上线)</span>
            <span v-else class="text-shallow-black-12">(待上线...)</span>
          </template>
          <ProjectList
            :resumeNavigationUrl="resumeNavigationUrl"
            :projectInfo="item"
          />
        </a-collapse-panel>
      </a-collapse>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ProjectList from "@/components/ProjectList.vue";
// 获取数据
import resumeData from "@/model/ProjectInfoList.js";

const projectInfoAllList = resumeData.projectInfoAllList;
const resumeNavigationUrl = ref(resumeData.resumeNavigationUrl);
// 数据后期对接到数据库进行存储和查看
const list = ref(projectInfoAllList);
</script>

<style scoped>
.text-green-12 {
  font-size: 12px;
  color: green;
}

.text-shallow-black-12 {
  font-size: 12px;
  color: #cccccc; /* 十六进制值 */
}

.text-blue-12 {
  font-size: 12px;
  color: blue;
}
</style>
